<template>
  <div class="progressbar">
    <span class="time"
      >{{ parseInt(currentTime / 60) }}:{{
        parseInt(currentTime % 60) > 9
          ? parseInt(currentTime % 60)
          : "0" + parseInt(currentTime % 60)
      }}</span
    >
    <div class="bar">
      <input
        class="range"
        type="range"
        :min="0"
        :max="valuecount"
        v-model="value"
        @change="$emit('update:crut', value)"
        @input="isvalue = false"
      />
      <div class="pretty">
        <div class="inside" :style="`width:${(value / valuecount) * 100}%`"></div>
      </div>
    </div>
    <span class="time"
      >{{ parseInt(valuecount / 60000) }}:{{
        parseInt((valuecount / 1000) % 60) > 9
          ? parseInt((valuecount / 1000) % 60)
          : "0" + parseInt((valuecount / 1000) % 60)
      }}</span
    >
  </div>
</template>

<script>
export default {
  props: {
    currentSong: Object,
    playing: Boolean,
    currentTime: Number,
    duration: Number,
  },
  data: function () {
    return {
      value: this.currentTime * 1000,
      isvalue: true,
      valuecount:this.duration*1000,
    };
  },
  watch: {
    currentTime: function (n) {
      if (this.isvalue) {
        this.value = n * 1000;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.progressbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .time {
    font-size: 14px;
    color: #aaa;
    &:nth-of-type(1) {
      margin-right: 8px;
    }
    &:nth-of-type(2) {
      margin-left: 8px;
    }
  }
  .bar {
    flex: 1;
    position: relative;
    .range {
      width: 100%;
      opacity: 0;
    }
    .pretty {
      height: 9px;
      width: 100%;
      background-color: rgba(200, 200, 200, 0.3);
      border-radius: 8px;
      top: 5px;
      left: 0;
      position: absolute;
      z-index: -1;
      .inside {
        position: absolute;
        background-color: rgba(200, 200, 200, 0.9);
        height: 100%;
        border-radius: 9px;
        top: 0;
        left: 0;
        &::before {
          content: "";
          width: 12px;
          height: 12px;
          position: absolute;
          top: -2px;
          right: -6px;
          border-radius: 50%;
          background-color: white;
        }
      }
    }
  }
}
</style>